<!--
 * @Descripttion: 仿钉钉流程设计器
 * @version: 1.2
 * @Author: sakuya
 * @Date: 2021年9月14日08:38:35
 * @LastEditors: sakuya
 * @LastEditTime: 2022年2月9日16:48:49
-->

<template>
  <div class="sc-workflow-design" @mousewheel="scaleChange" @mousedown="moveOpenMethod" @mouseup="moveCloseMethod"
    @mousemove="workFlowMove" @mouseleave="moveCloseMethod">
    <div class="box-scale" style="transform:scale(1);" ref="workFlow">
      <node-wrap v-if="nodeConfig" :modelValue.sync="nodeConfig"></node-wrap>
      <div class="end-node">
        <div class="end-node-circle"></div>
        <div class="end-node-text">流程结束</div>
      </div>
    </div>
    <use-select v-if="selectVisible" ref="useselect" @closed="selectVisible=false"></use-select>
  </div>
</template>

<script>
import nodeWrap from './nodeWrap'
import useSelect from '@/components/Select'

export default {
  provide() {
    return {
      select: this.selectHandle,
    }
  },
  props: {
    modelValue: { type: Object, default: () => {} },
  },
  components: {
    nodeWrap,
    useSelect,
  },
  data() {
    return {
      nodeConfig: this.modelValue,
      selectVisible: false,
      moveOpen: false,
      oldX: 0,
      oldY: 0,
      left: 0,
      top: 0,
    }
  },
  watch: {
    modelValue(val) {
      this.nodeConfig = val
    },
    nodeConfig(val) {
      this.$emit('update:modelValue', val)
    },
  },
  methods: {
    selectHandle(type, data) {
      this.selectVisible = true
      this.$nextTick(() => {
        this.$refs.useselect.open(type, data)
      })
    },
    refresh() {
      this.$nextTick(() => {
        this.$refs.workFlow.style.transform = 'scale(1)'
        this.$refs.workFlow.style.left = 0 + 'px'
        this.$refs.workFlow.style.top = 0 + 'px'
      })
    },
    scaleChange(v) {
      this.$nextTick(() => {
        let Dom = this.$refs.workFlow
        let size = Dom.style.transform.replace('scale(', '').replace(')', '')
        let num = parseFloat(size)
        if (v.deltaY < 0) {
          num >= 1.5 ? (num = 1.5) : (num = num + 0.1)
        } else {
          num <= 0.5 ? (num = 0.5) : (num = num - 0.1)
        }
        Dom.style.transform = `scale(${num})`
      })
      v.preventDefault()
    },
    moveOpenMethod(v) {
      this.moveOpen = true
      // 记录当前位置
      this.$nextTick(() => {
        this.left = this.$refs.workFlow.style.left ? parseInt(this.$refs.workFlow.style.left.replace('px', '')) : 0
        this.top = this.$refs.workFlow.style.top ? parseInt(this.$refs.workFlow.style.top.replace('px', '')) : 0
      })
      this.oldX = v.screenX
      this.oldY = v.screenY
    },
    moveCloseMethod(v) {
      this.moveOpen = false
      this.oldX = v.screenX
      this.oldY = v.screenY
    },
    workFlowMove(v) {
      if (this.moveOpen) {
        this.$nextTick(() => {
          this.$refs.workFlow.style.left = parseInt(this.left + (v.screenX - this.oldX)) + 'px'
          this.$refs.workFlow.style.top = parseInt(this.top + (v.screenY - this.oldY)) + 'px'
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@import './style/index.scss';
</style>
